<template>
  <div class="vouche">
    <main>
      <section class="announcement hidden-xs-only">
        <aside>
          <h1>充值说明</h1>
        </aside>
        <article>
          <div>
            <p class="kong">为支付安全考虑，实际支付金额会有小范围浮动</p>
            <p class="kong">请按照提示金额支付，实际支付金额即为到账金额</P>
            <p class="kong">如您充值长时间未到账，请联系客服帮您解决</P>
          </div>
        </article>
      </section>
      <section :class="mobile==false?'Krypton':'KryptonMobile'">
        <aside>
          <h1 style="background-color: #409EFF;color: white;">充值{{mobile==false?'':'公告'}}</h1>
          <div v-if="mobile">
            <p class="shoujikong">为支付安全考虑，实际支付金额会有小范围浮动</p>
            <p class="shoujikong">请按照提示金额支付，实际支付金额即为到账金额</p>
            <p class="shoujikong">如您充值长时间未到账，请联系客服帮您解决</p>
          </div>
        </aside>
        <article>
          <el-form ref="form" :model="money" label-width="80px">
            <el-form-item label="充值账户">
                <span>{{user.username}}</span>
            </el-form-item>
            <el-form-item label="充值类型">
                <span>指南针平台充值</span>
            </el-form-item>
            <el-form-item label="选择金额" id="mobile">
                <div :style="mobile==false?'':'margin-left:-80px'">
                  <el-button v-for="(item,index) in moneylist" @click="moneySelect(item)" :key="index">￥{{item}}</el-button>
                </div>
            </el-form-item>
            <el-form-item prop="num">
              <el-input v-model="payAmount" placeholder="其他数量" :class="mobile===false?'qt':'qtMobile'" maxlength="5" minlength="2"></el-input>
            </el-form-item>
            <el-form-item label="支付方式" :class="mobile==false?'':'zffs'">
                <img src="../../assets/zfb.png" alt="支付宝" class="zfb">
            </el-form-item>
            <el-form-item class="submit" :style="mobile==false?'':'margin-left:-60px'">
              <el-button type="primary" @click="onSubmit"  style="width:150px">确定</el-button>
            </el-form-item>
          </el-form>
          <form action="https://pay.bearsoftware.net.cn/" method="post" v-show="false">
              <input type="text" v-for="(item,key,i) in voucheForm" :name="key" :value="item" :key="i">
              <input type="submit" value="Submit"  ref="voucheSb"/>
          </form>
        </article>
      </section>
    </main>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  props: {},
  data() {
    return {
        payAmount:'',
        mobile:false,
        moneylist:[50,100,200,500],
        money:{
          num:''
        },
        voucheForm:{},
    };
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    if(navigator.userAgent.match(/(iPhone|iPad|Android|ios)/i)){
        this.mobile = true;
    }
  },
  mounted() {},
  watch: {
  },
  methods: {
      //点击确定触发
      async onSubmit(){
          if(this.payAmount>50000){
            this.$message.error("充值金额不能高于50000！")
            return;
          }else if (this.payAmount<50){
            this.$message.error("充值金额不能低于50元!")
            return;
          }else if (!Number.isInteger(+this.payAmount)) {
            this.$message.error("请输入数字值!")
            return;
          }
          const [err,res] = await this.$http.request({
            url:"/payRequest",
            method:"POST",
            data:{
              payAmount:this.payAmount,
            }
          });
          if(err)return;
          for(let key in res.data.data){
              await this.$set(this.voucheForm,key,res.data.data[key])
            }
            this.$(this.$refs.voucheSb).click();
            // window.location = "http://www.baidu.com"
      },
      moneySelect (num){
          this.payAmount = num;
      }
  },
};
</script>

<style scoped lang="stylus">
@import './Vouche.styl'
</style>
